$(function () {
  const layer = layui.layer;
  const form = layui.form;
  initCateList();

  // 渲染文章列表
  function initCateList() {
    $.ajax({
      type: "GET",
      url: "/my/article/cates",
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);

        let htmlStr = template("tpl-table", res);
        $("tbody").html(htmlStr);
      }
    });
  }

  let addIndex = null;
  // 添加类别按钮
  $("#btn-add").on("click", function () {
    addIndex = layer.open({
      type: 1,
      title: "添加文章分类",
      area: ["500px", "300px"],
      content: $("#dialog-add").html()
    });
  });

  // 以事件委托的形式 为添加类别表单 绑定事件 并向服务器提交新增的数据
  $("body").on("submit", "#form-add", function (e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "/my/article/addcates",
      data: $(this).serialize(),
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);
        layer.msg(res.message);
        // 添加成功之后 重新调用渲染文章列表函数 渲染表格
        initCateList();
        layer.close(addIndex);
      }
    });
  });

  let editIndex = null;
  // 以事件委托的形式 为编辑按钮 绑定事件  使弹出编辑框
  $("body").on("click", ".btnEdit", function () {
    editIndex = layer.open({
      type: 1,
      title: "修改文章分类",
      area: ["500px", "300px"],
      content: $("#dialog-edit").html()
    });

    // 根据 Id 获取文章分类数据 并填充到表单中
    let id = $(this).data("id");
    $.ajax({
      type: "GET",
      url: "/my/article/cates/" + id,
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);
        // 1.form.val()第一个参数是form的名字。
        // 2.form.val()第二个参数是json字符串,需要进行数据转化。
        // 3.form.val()必须引入layui中的form模块 lay-filter后使用。
        form.val("form-edit", res.data);
      }
    });
  });

  // 以事件委托的形式 为编辑表单 绑定事件  并向服务器提交修改后的数据
  $("body").on("submit", "#form-edit", function (e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "/my/article/updatecate",
      data: $(this).serialize(),
      success: function (res) {
        if (res.status !== 0) return layer.msg(res.message);
        layer.msg(res.message);
        // 修改成功之后 重新调用渲染文章列表函数 渲染表格
        initCateList();
        layer.close(editIndex);
      }
    });
  });

  // 以事件委托的形式 为删除按钮 绑定事件
  $("tbody").on("click", "#btnDelete", function () {
    // 根据 Id值删除对应的文章分类
    let id = $(this).data("id");
    layer.confirm("确认删除吗?", { icon: 3, title: "提示" }, function (index) {
      $.ajax({
        type: "GET",
        url: "/my/article/deletecate/" + id,
        success: function (res) {
          if (res.status !== 0) return layer.msg(res.message);
          layer.msg(res.message);
          // 删除成功之后 重新调用渲染文章列表函数 渲染表格
          initCateList();
          layer.close(index);
        }
      });
    });
  });
});
